<template>
  <div class="exchangePoints hideScrollBar" @scroll="setNavBackgroungColor">
    <!-- 导航 -->
    <NavBar
      :title="t('mvp.exchangePoints.text1')"
      titleColor="#141924"
      isFixed
    />
    <!-- 内容 -->
    <div class="contentview">
      <!-- 兑换 -->
      <div class="inputbox">
        <div class="inputbox-topdesc">{{ t("mvp.exchangePoints.text2") }}</div>
        <div class="inputbox-ponints">
          {{ toThousands(pageData.integral) }}
        </div>
        <!-- 输入框 -->
        <van-field
          class="inputbox-input"
          type="digit"
          v-model="pageData.input"
          :maxlength="pageData.integral"
          center
          clearable
          :formatter="inputFormatter"
          label=""
          :placeholder="`${t('mvp.exchangePoints.text9')} ${decimalToLength(
            pageData.integral / 100
          )} BDC`"
        >
          <template #button>
            <div class="inputbox-btn" @click="inputMax">
              {{ t("mvp.exchangePoints.text3") }}
            </div>
          </template>
        </van-field>
        <div class="inputbox-desc">
          100 {{ t("mvp.exchangePoints.text4") }}=1 BDC
        </div>
        <!-- 兑换按钮 -->
        <div
          class="inputbox-exchange"
          :class="{ 'inputbox-activity': pageData.integral > 0 }"
          @click="onExchange"
        >
          {{ t("mvp.exchangePoints.text5") }}
        </div>
      </div>
      <!-- 介绍 -->
      <!-- <div class="contentview-desc" style="margin-top: 20px">
        1. {{ t("mvp.exchangePoints.text6") }}
      </div>
      <div class="contentview-desc">2. {{ t("mvp.exchangePoints.text7") }}</div>
      <div class="contentview-desc">3. {{ t("mvp.exchangePoints.text8") }}</div>
      <div class="contentview-desc">
        4. {{ t("mvp.exchangePoints.text10") }}
      </div>
      <div class="contentview-desc">
        5. {{ t("mvp.exchangePoints.text11") }}
      </div> -->
    </div>
  </div>
</template>
<script setup name="exchangePoints">
import { toThousands, reponseIntercept, decimalToLength } from "@/utils";
import { integralExchangeToBdc } from "@/api/bdc";
import { getMyIntergral } from "@/api/user";
import { showConfirmDialog } from "vant";
import { useGlobalStore } from "~~/store/global";
import { useThrottleFn } from "@vueuse/core";
import { showSuccessToast } from "vant";
const { t } = useI18n();
const route = useRoute();
// const userStore = useUserStore();
console.log("页面参数:", route.query);

const globalStore = useGlobalStore();
// 如果没有登录-直接跳转登录页面
if (!globalStore.$state.token && process.client) {
  bridge.onAppLogin();
}

// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase

// 页面属性
const pageData = reactive({
  input: "",
  integral: 0,
});

const inputMax = () => {
  pageData.input = pageData.integral || 0;
};
const inputFormatter = (value) => {
  if (/^[0]/g.test(value)) {
    return "";
  } else if (value > pageData.integral) {
    return pageData.integral + "";
  }
  return value;
};

const setNavBackgroungColor = (val) => {
  console.log("--偏移量--", val);
};
// 兑换提示

const onExchange = useThrottleFn(() => {
  if (pageData.integral <= 0) return;
  if (pageData.input <= 0) return;
  showConfirmDialog({
    title: `${t("mvp.exchangePoints.alert1")}`,
    message: `${t("mvp.exchangePoints.alert2")} ${toThousands(
      pageData.input
    )} ${t("mvp.exchangePoints.alert3")} ${decimalToLength(
      pageData.input / 100
    )} BDC`,
    confirmButtonText: t("mvp.exchangePoints.alert4"),
    cancelButtonText: t("mvp.exchangePoints.alert5"),
  }).then(() => {
    onExchangeddd();
  });
}, 1000);
// 积分兑换
const onExchangeddd = useThrottleFn(async () => {
  const response = await integralExchangeToBdc({
    integralAmount: pageData.input,
  });
  reponseIntercept(response, (res) => {
    if (res) {
      showSuccessToast(t("mvp.other.text1"));
      pageData.input = 0;
      getMyIntergralRequest();
    }
  });

  console.log("--积分兑换--", response);
}, 1000);

const getMyIntergralRequest = () => {
  getMyIntergral({}).then((response) => {
    console.log("--个用户积分--", response);
    reponseIntercept(response, (res) => {
      if (res) {
        pageData.integral = res.integral;
      }
    });
  });
};
onBeforeMount(() => {
  // 1. 获取可用积分
  getMyIntergralRequest();
});
onMounted(() => {
  // 埋点访问
  firebase?.logEvent("BDC_H5_ExchangePoints_PUV", {
    time: Date.now(),
  });
});
</script>
<style lang="scss" scoped>
.exchangePoints {
  background-color: #f4f5f7;
  min-height: 100vh;
  .contentview {
    padding: 0 30px;
    &-desc {
      font-size: 26px;
      color: #999da7;
      line-height: 36px;
      letter-spacing: -0.8px;
      margin-bottom: 5px;
    }
  }

  .inputbox {
    margin-top: 20px;
    border-radius: 24px;
    overflow: hidden;
    background-color: #fff;
    padding: 0 30px;

    &-topdesc {
      margin-top: 30px;
      margin-bottom: 10px;
      font-size: 30px;
      color: #141924;
      text-align: center;
    }
    &-ponints {
      text-align: center;
      color: #007bff;
      font-size: 48px;
      font-weight: 700;
      margin-bottom: 30px;
    }
    &-input {
      font-size: 15 * 2px;
      font-weight: 590;
      color: #141924;
      background-color: #f4f5f7;
      border-radius: 24px;
      height: 100px;
      margin-bottom: 10px;
    }
    &-btn {
      font-size: 30px;
      color: #007bff;
      font-weight: 590;
    }
    &-desc {
      font-size: 22px;
      color: #999da7;
      margin-bottom: 30px;
    }
    &-exchange {
      height: 96px;
      line-height: 96px;
      border-radius: 48px;
      text-align: center;
      background-color: rgba($color: #999da7, $alpha: 0.5);

      color: #fff;
      font-size: 30px;
      font-weight: 590;
      margin-bottom: 30px;
    }
    &-activity {
      background-color: #007bff;
    }
  }
}
</style>
